|
实现form表单提交验证功能
model : 绑定整个表单model值 rules : 整个表单校验规则 ref ：获取该表单form组件 prop : 绑定每个表单的规则，写在el-form-item上 validate : 对整个表单进行校验的方法 valid : 每个必填表单项都提交为true,否则为false
1、简易版 表单提交
//使用element-ui 页面组件
立即创建
//data中定义form表单中每项表单model值、和每个表单校验的规则
export default {
data() {
return {
ruleForm: {
name: '',
region: '',
},
rules: {
name: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
region: [
{ required: true, message: '请选择活动区域', trigger: 'change' }
],
};
},
//定义表单提交方法
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
}
}
2、复杂版 表单提交
对于页面有多个整体的form提交，每个form表单里类型为文本框、下拉框、单选框、复选框等类型，可对类型进行封装，使用循环遍历使页面呈现不同类型表单项
局端设备
{{fasj.base[item.model]}}
提 交
export default {
data() {
return {
fasj: {
base: {}, // 基本信息
deviceInfo: {},
},
//定义 页面表单结构
fromHtmlList: {
baseInfo: [],
deviceInfo: {
ywzsb: [],
sitsb: []
}
},
//定义 表单校验规则
rules: {
'deviceInfo.sitsb.IPType': [
{ required: true, message: '请输入', trigger: 'blur' }
],
'deviceInfo.sitsb.IPAddr': [
{ required: true, message: '请输入', trigger: 'blur' }
],
'deviceInfo.sitsb.netmask': [
{ required: true, message: '请输入', trigger: 'blur' }
],
'deviceInfo.sitsb.vlanId': [
{ required: true, message: '请输入', trigger: 'blur' }
],
},
options: {
IPType: [
{label: 'ipv4', value: 'ipv4'},
{label: 'ipv6', value: 'ipv6'}
],
rmSite: [],
room: [],
},
}
},
created(){
const orderType = '业务开通' ;//页面初始加载用到的变量值，可通过组件传值获取
//created中初始定义页面表单结构
this.fromHtmlList = {
baseInfo: orderType === '业务开通' ? [
{label: '接入方式', labelWidth: '100px', rule: '' , model: 'serviceType', option: '', el: 'txt', class: 'w2'},
{label: '标准九级地址', labelWidth: '120px', rule: '', model: 'aendAdreesName', option: '', el: 'txt', class: 'w2'},
{label: '城乡类型', labelWidth: '100px', rule: 'cityType', model: 'cityType', option: 'cityType', el: 'slt', class: 'w2'},
{label: '方案设计附件', labelWidth: '120px', rule: '', model: 'fileId', option: '', el: 'btn', class: 'w2'},
] : orderType === '移机' ? [
{label: '接入方式', labelWidth: '100px', rule: '' , model: 'serviceType', option: '', el: 'txt', class: 'w2'},
{label: '标准九级地址', labelWidth: '120px', rule: '', model: 'aendAdreesName', option: '', el: 'txt', class: 'w2'},
{label: '城乡类型', labelWidth: '100px', rule: 'cityType', model: 'cityType', option: 'cityType', el: 'slt', class: 'w2'},
{label: '方案设计附件', labelWidth: '120px', rule: '', model: 'fileId', option: '', el: 'btn', class: 'w2'},
{label: '移机场景', labelWidth: '100px', rule: 'moveScene', model: 'moveScene', option: 'moveScene', el: 'slt', class: 'w2'},
{label: '是否需要网络调整', labelWidth: '', rule: 'netChange', model: 'netChange', option: 'netChange', el: 'slt', class: 'w2'}
] : [
{label: '接入方式', labelWidth: '100px', rule: '' , model: 'serviceType', option: '', el: 'txt', class: 'w2'},
{label: '标准九级地址', labelWidth: '120px', rule: '', model: 'aendAdreesName', option: '', el: 'txt', class: 'w2'},
{label: '城乡类型', labelWidth: '100px', rule: 'cityType', model: 'cityType', option: 'cityType', el: 'slt', class: 'w2'},
{label: '方案设计附件', labelWidth: '120px', rule: '', model: 'fileId', option: '', el: 'btn', class: 'w2'},
{label: '是否需要网络调整', labelWidth: '', rule: 'netChange', model: 'netChange', option: 'netChange', el: 'slt', class: 'w2'},
{label: '是否更换末端设备', labelWidth: '', rule: 'devChange', model: 'devChange', option: 'devChange', el: 'slt', class: 'w2'}
],
deviceInfo: {
ywzsb: serviceType === 'PON' ? [
// 默认PON
{label: '机房', labelWidth: '90px', rule: '' , model: 'siteRoom', option: '', el: 'ipt', class: 'w2', focus: true, placeholder: '点击查询'},
{label: '设备名称', labelWidth: '90px', rule: '', model: 'deviceName', option: '', el: 'ipt', class: 'w2', focus: true, placeholder: '点击查询'},
{label: '设备端口', labelWidth: '90px', rule: '', model: 'devicePort', option: '', el: 'ipt', class: 'w2', focus: true, placeholder: '点击查询'},
{label: '延伸设备', labelWidth: '90px', rule: '', model: 'deviceExtend', option: '', el: 'ipt', class: 'w2', focus: true, placeholder: '点击查询'}
] : [
// 裸光纤、传输下沉、传输延伸(ywzsb)
{label: '机房', labelWidth: '', rule: '' , model: 'siteRoom', option: '', el: 'ipt', class: 'w2', focus: true, placeholder: '点击查询'},
{label: '站点', labelWidth: '', rule: '', model: 'site', option: '', el: 'ipt', class: 'w2'},
{label: '设备名称', labelWidth: '', rule: '', model: 'deviceName', option: '', el: 'ipt', class: 'w2', focus: true, placeholder: '点击查询'},
{label: '设备端口', labelWidth: '', rule: '', model: 'devicePort', option: '', el: 'ipt', class: 'w2', focus: true, placeholder: '点击查询'},
],
sitsb: serviceType === 'PON' ? [
{label: '机房名称', labelWidth: '', rule: '' , model: 'siteRoom', option: '', el: 'ipt', class: 'w2'},
{label: '站点名称', labelWidth: '', rule: '', model: 'site', option: '', el: 'ipt', class: 'w2'},
{label: '汇聚交换机', labelWidth: '', rule: '', model: 'switch', option: '', el: 'ipt', class: 'w2'},
{label: '汇聚交换机端口', labelWidth: '', rule: '', model: 'switchPort', option: '', el: 'ipt', class: 'w2'},
{label: 'SR/BARS', labelWidth: '', rule: '' , model: 'srbars', option: '', el: 'ipt', class: 'w2'},
{label: 'SR/BARS端口', labelWidth: '', rule: '', model: 'srbarsPort', option: '', el: 'ipt', class: 'w2'},
{label: 'IP地址类型', labelWidth: '', rule: 'IPType', model: 'IPType', option: 'IPType', el: 'slt', class: 'w2'},
{label: 'IP地址', labelWidth: '', rule: 'IPAddr', model: 'IPAddr', option: '', el: 'ipt', class: 'w2'},
{label: '子网掩码', labelWidth: '', rule: 'netmask', model: 'netmask', option: '', el: 'ipt', class: 'w2'},
{label: 'VLAN ID', labelWidth: '', rule: 'vlanId', model: 'vlanId', option: '', el: 'ipt', class: 'w2'}
] : serviceType === '裸光纤' ? [
// 裸光纤
{label: '机房名称', labelWidth: '', rule: '' , model: 'siteRoom', option: '', el: 'ipt', class: 'w2', focus: true, placeholder: '点击查询'},
{label: '站点名称', labelWidth: '', rule: '', model: 'site', option: '', el: 'ipt', class: 'w2'},
{label: 'SR', labelWidth: '', rule: '', model: 'SR', option: '', el: 'ipt', class: 'w2', focus: true, placeholder: '点击查询'},
{label: 'SR端口', labelWidth: '', rule: '', model: 'SRPort', option: '', el: 'ipt', class: 'w2', focus: true, placeholder: '点击查询'},
{label: 'BARS', labelWidth: '', rule: '' , model: 'BARS', option: '', el: 'ipt', class: 'w2', focus: true, placeholder: '点击查询'},
{label: 'BARS端口', labelWidth: '', rule: '', model: 'BARSPort', option: '', el: 'ipt', class: 'w2', focus: true, placeholder: '点击查询'},
] : [
// 传输下沉、传输延伸
]
}
}
},
methods:{
async checkRequired() {
let checkName = ['base','sitsb'];//表单校验定义ref
let text;
for(let key of checkName){
if(this.$refs[key]){
this.$refs[key].validate((valid) => {
if(!valid){
text = '请检查必填项';
}else {
return false;
}
});
}
}
if(text){
this.$message.warning(text);
return false;
}
let _res_ = await this.saveFasjData('', true);//页面表单要保存后才能提交
if(!!_res_ && _res_.code === 200){
this.commit(_param, _url);//保存表单再提交
}else{
this.$message.error(_res_.msg)
}
},
async commit(param, url) {
this.loadings.body = true;
let _res = await postDataRequest(url, param);
this.loadings.body = false;
if (_res && _res.code === 200) {
this.$message.success("提交成功");
this.$router.go(-1);
}
}
}
}
|